<template>
    <div ref="topDiv">
        <Split v-model="split1" style="height:100%;width:100%">
            <div slot="left" class="demo-split-pane">
                <Tree :data="menuTree" :render="renderContent"></Tree>
                <Dropdown trigger="click" style="margin-left:20px" placement="right-start"
                          ref="contentMenu" @on-click="selectMenuItem">
                    <DropdownMenu slot="list">
                        <DropdownItem name="addPoint">添加菜单</dropdownitem>
                        <DropdownItem name="editPoint">修改菜单</dropdownitem>
                        <DropdownItem name="deletePoint">删除菜单</dropdownitem>
                    </dropdownmenu>
                </dropdown>
            </div>

            <div slot="right" class="demo-split-pane">
                <Form :model="formItem" :label-width="150" v-show="menuInput"  ref="formCustom" :rules="ruleCustom">
                    <Row>
                        <!--<Col span="12">
                            <FormItem label="菜单ID：" prop="menuId">
                                <Input v-model="formItem.menuId" ></Input>
                            </FormItem>
                        </Col>-->
                        <Col span="12">
                            <FormItem label="菜单名称：" prop="menuName">
                                <Input v-model="formItem.menuName" ></Input>
                            </formitem>
                        </Col>
                        <Col span="12">
                            <FormItem label="菜单排序：" prop="orderNum">
                                <Input v-model="formItem.orderNum" ></Input>
                            </formitem>
                        </Col>
                    </Row>
                    <Row>
                        <!-- <Col span="12">
                             <FormItem label="菜单icon代码：">
                                 <Input v-model="formItem.iconCode" ></Input>
                             </FormItem>
                         </Col>-->
                        <Col span="12">
                            <FormItem label="是否功能节点：" prop="isLeaf">
                                <Select v-model="formItem.isLeaf">
                                    <Option value="1">一级</Option>
                                    <Option value="2">二级</Option>
                                    <Option value="3">三级</Option>
                                </Select>
                            </formitem>
                        </Col>
                        <Col span="12">
                            <FormItem label="菜单icon代码：">
                                <Input v-model="formItem.iconCode" ></Input>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="24">
                            <FormItem label="功能KEY：" prop="keyValue">
                                <Input v-model="formItem.keyValue" ></Input>
                            </FormItem>
                        </Col>
                    </Row>
                     <Row>
                        <Col span="24">
                            <FormItem label="菜单URL：" prop="route">
                                <Input v-model="formItem.route" ></Input>
                            </FormItem>
                        </Col>
                    </Row>
                    <FormItem>
                        <Button class="button-sure" v-show="!view" @click="saveOrUpdate('formCustom')">保存</Button>
                    </FormItem>
                </Form>
            </div>
        </Split>
    </div>
</template>
<script>
    import {Api} from '../../../api/index.js'
    export default{
        data () {
            return {
                ruleCustom: {
                    menuId: [{
                        required: true,
                        message: '  ',
                        trigger: 'blur'
                    }],
                    menuName: [{
                        required: true,
                        message: '  ',
                        trigger: 'blur'
                    }],
                    componentName: [{
                        required: true,
                        message: '  ',
                        trigger: 'blur'
                    }],
                    orderNum: [{
                        required: true,
                        message: '  ',
                        trigger: 'blur'
                    }],
                    isLeaf: [{
                        required: true,
                        message: '  ',
                        trigger: 'blur'
                    }],
                    keyValue: [{
                        required: true,
                        message: '  ',
                        trigger: 'blur'
                    }]
                },
                isAdd : false,
                menuInput : false,
                formItem: {
                    menuId:'',
                    menuName: '',
                    orderNum:'',
                    iconCode: '',
                    menuUrl: '',
                    isLeaf: '',
                    componentName:'',
                    parentId:'',
                },
                split1:0.25,
                selectNode: {}, //节点信息
                selectNodeInfo:{},
                selectRoot:{},
                loading: false,
                addName: "test",
                addModal: false,
                tableData: [],
                mLevel: "", //临时存储当前表格菜单等级
                pId: "", //临时存储当前表格菜单父亲
                menuTree: [{
                    menuId   : '100',
                    menuName : '菜单',
                    title: '菜单',
                    expand: true,
                    children: []
                }],
                view:true
            }
        },
        mounted(){
            this.$refs.topDiv.style.height = (window.innerHeight - 120) + 'px';
        },
        methods: {
            renderContent(h, {root,node,data}){
                return h('span', {
                    style: {
                        display: 'inline-block',
                        cursor: 'pointer',
                        color: 'green'
                    },
                    on: {
                        click: () => {
                            this.selectNodeInfo = data;
                            this.formItem = Object.assign({}, data);
                            this.getSelectedNodes(data);
                        },
                        //右键点击事件
                        contextmenu: (e) => {
                            e.preventDefault();
                            this.selectNodeInfo =  data;
                            this.selectNode =  node;
                            this.selectRoot = root;
                            this.$refs.contentMenu.$refs.reference = event.target;
                            this.$refs.contentMenu.currentVisible = !this.$refs.contentMenu.currentVisible;
                        },
                    }
                }, [h('span', [h('Icon', {
                    props: {
                        type: 'folder'
                    },
                    style: {
                        marginRight: '8px'
                    }
                }), h('span', data.title)])]);
            },
            selectMenuItem(name){
                if(name == "addPoint"){
                    this.isAdd = true;
                    this.view = false;
                    this.menuInput = true;
                    this.formItem = {};
                }
                if(name == "editPoint"){
                    this.isAdd = false;
                    this.view = false;
                    this.menuInput = true;
                    this.formItem = Object.assign({},this.selectNodeInfo);
                }
                if(name == "deletePoint"){
                    if(this.menuTree[0] == this.selectNode){
                        this.$Message.error('根节点不能删除');
                        return ;
                    }
                    this.$Modal.confirm({
                        title: '提示信息',
                        content: '<p>删除该菜单及其子菜单</p>',
                        okText:'确认',
                        cancelText:'取消',
                        onOk: () => {
                            this.$http.get(Api.deleteMobileMenu + "/"+this.selectNodeInfo.menuId, {params:{}
                            }).then(res=>{
                                const parentKey = this.selectRoot.find(el => el === this.selectNode).parent;
                                const parent = this.selectRoot.find(el => el.nodeKey === parentKey).node;
                                for(var i=0;i<parent.children.length;i++){
                                    if(parent.children[i].menuId == this.selectNodeInfo.menuId)
                                    {
                                        console.log(parent.children[i].menuId)
                                        console.log(this.selectNodeInfo.menuId)
                                        parent.children.splice(i, 1);
                                        this.$Message.success('删除成功');
                                        return ;
                                    }
                                }
                            }).catch(e => {
                                this.$Message.error('请求失败');
                            })
                        }
                    })
                }
            },
            //点击目录树事件
            getSelectedNodes(data) {
                this.view = true;
                this.menuInput = true;
                if(this.selectNodeInfo.isLeaf != "3"){
                    this.getMenusByParentId(this.selectNodeInfo.menuId);
                }
            },
            saveOrUpdate(name){
                console.log(name);
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.isAdd){
                            this.saveMenu();
                        }else{
                            this.updateMenu();
                        }
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            saveMenu(){
                this.formItem.parentId = this.selectNodeInfo.menuId;
                this.$http.post(Api.addMobileMenu, this.formItem).then(res => {
                    this.selectNodeInfo = this.menuTree[0];
                    console.log(res);
                    if ((res.data.result!='fail')) {
                        this.getMenusByParentId('100');
                        this.$Message.success('成功');
                    }else{
                        this.$Message.error(res.data.message);
                    }

                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            updateMenu(){
                this.$http.post( Api.updateMobileMenu, this.formItem).then(res => {
                    this.selectNodeInfo = this.menuTree[0];
                    if ((res.data.result!='fail')) {
                        this.getMenusByParentId('100');
                        this.$Message.success('成功');
                    }else{
                        this.$Message.error(res.data.message);
                    }

                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            getMenusByParentId(id){
                this.$http.get(Api.queryMobileMenu + "/"+id, {params:{}}).then(res => {
                    var nodes=[];
                    res.data.data.forEach(item=>{
                        var node = item;
                        node.title = item.menuName;
                        node.expand = true;
                        nodes.push(node);
                    })
                    this.$set(this.selectNodeInfo,'children',nodes)
                    //this.$Message.success('成功');
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            removeElement(menuId){

            }
        },
        created() {
            this.selectNodeInfo = this.menuTree[0];
            this.getMenusByParentId('100');
        }
    }
</script>
<style>
    .demo-split{
        height: 200px;
        border: 1px solid #dcdee2;
    }

    .demo-split-pane{
        padding: 10px;
        height:100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    li{
        display: block;
    }
</style>
